{% extends 'base.html' %}

{% load notifications_tags %}
{% block style %}
    <style>
        .panel-heading span {
            font-size: 20px;
        }

        .panel-content {
            background-color: #fcf8e3;
            width: 80%;
            padding: 2px;
            margin: 5px;
            margin-bottom: 10px;
        }

        .time {
            font-size: 14px;
        }

        .project {
            font-size: 18px;
        }

        .panel-content span {
            font-size: 16px;
        }

        .button {
            margin-right: 20px;
        }

        .btn {
            margin-right: 10px;
        }

        .no-notifications {
            padding: 48px 60px;
            margin: 40px;
            text-align: center;
            background-color: #eee;
        }
    </style>
{% endblock %}

{#{% block head %}#}
{#{% endblock %}#}
{##}

{% block container %}
    <div class="col-md-8">
        <div class="panel">
            <div class=" clearfix panel-heading">
                <span>全部通知</span>
                <a data-href="{% url 'notifications:mark_all_as_read' %}" class="notify btn btn-primary pull-right">全部标为已读</a>
            </div>
            {% notifications_unread as unread_count %}
            {% if unread_count <= 0 %}
                <div class="no-notifications">
                    <h4>暂无新通知</h4>
                </div>
            {% endif %}
            {{ notifications_unread }}
            {% for foo in request.user.notifications.unread %}
                <div class="panel-body">
                    <span class="time">{{ foo.timesince }}前</span>
                    <div class="project">
                        <b>{{ foo.actor }}在</b>
                        <a class="notice-target" href="{{ foo.target.get_absolute_url }}"> {{ foo.target }}</a>
                        中{{ foo.verb }}：
                    </div>
                    <div class="panel-content">
                        <span>{{ foo.description }}</span>
                    </div>
                    <div class="button">
                        <a data-href="{% url 'notifications:delete' foo.slug %}"
                           class="notify btn  btn-danger pull-right">删除</a>
                        <a id="mark_as_read" data-href="{% url 'notifications:mark_as_read' foo.slug %}"
                           class="notify btn  btn-primary pull-right">标记为已读</a>
                    </div>
                </div>
            {% endfor %}
            <hr>
            {% for foo in request.user.notifications.read %}
                <div class="panel-body">
                    <span class="time">{{ foo.timesince }}前</span>
                    <div class="project">
                        <b>{{ foo.actor }}在</b>
                        <a class="notice-target" href="{{ foo.target.get_absolute_url }}"> {{ foo.target }}</a>
                        中{{ foo.verb }}：
                    </div>
                    <div class="panel-content">
                        <span>{{ foo.description }}</span>
                    </div>
                    <div class="button">
                        <a data-href="{% url 'notifications:delete' foo.slug %}"
                           class="notify btn  btn-danger pull-right">删除</a>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}

{% block domready %}
    <script>
        $(function () {
            $(".notify").bind("click", function () {
                $.ajax({
                    'type': 'GET',
                    'url': $(this).data('href'),
                    success: function () {
                        window.location.reload();
                    }
                });
            })
        })
    </script>
{% endblock %}
